<template>
	<view class="page-content-box">
		<view class="my-top-box">
			<view class="my-top-content">
				
				<!-- @click="$util.goTo('/pages/hrlogin/hrlogin')" -->
				<view  class="name-box" >
					<text>停车延期申请</text>
				</view>
				
			</view>
			<!-- <view class="scan-box" @click="scanCompany">
				<image style="width: 40rpx; height: 40rpx;" mode="aspectFit" src="../../static/saoma.png"></image>
			</view> -->
		</view>
		<!-- 输入车牌号区域 -->
		<view class="content-box">
			<!-- <view class="car-number">
				<view class="title">
					车牌号
				</view>
				<view class="car-number-box">
					<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
				</view>
			</view> -->
			<view class="car-number">
				<view class="title">
					车牌号
				</view>
				<view class="car-chose" @click="showDialogCarNum=true">
					<!-- <input class="uni-input input-content" placeholder-class="input-place" maxlength="30" name="input" placeholder="请输入姓名" v-model="form.nickName"/> -->
					<view class="choseCarNum">
						{{form.carNum}}
					</view>
					<image style="width: 70rpx; height: 70rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/xiala.png"></image>
				</view>
			</view>
			<view class="name-box">
				<view class="title">
					姓 名
				</view>
				<view class="name-input">
					<input class="uni-input input-content choseDept" placeholder-class="input-place" maxlength="30" name="input" disabled="true" placeholder="请输入姓名" v-model="form.name"/>
				</view>
			</view>
			<view class="dept-box">
				<view class="title">
					部 门
				</view>
				<!-- @click="showDialogDept=true" -->
				<view class="dept-chose" >
					<!-- <input class="uni-input input-content" placeholder-class="input-place" maxlength="30" name="input" placeholder="请输入姓名" v-model="form.nickName"/> -->
					<view class="choseDept">
						{{form.choseDept}}
					</view>

					<image style="width: 70rpx; height: 70rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/xiala.png"></image>
				</view>
			</view>
			<view class="phone-box">
				<view class="title">
					手机号码
				</view>
				<view class="name-input">
					<input class="uni-input input-content choseDept" placeholder-class="input-place" maxlength="11" name="input" type="tel"  disabled="true" placeholder="请输入手机号码" v-model="form.mobilePhone"/>
				</view>
			</view>
			
			<view class="time-box">
				<view class="title">
					延期时长
				</view>
				<!--  @click="showDialogTime=true" -->
				<view class="time-chose">
					<!-- <input class="uni-input input-content" placeholder-class="input-place" maxlength="30" name="input" placeholder="请输入姓名" v-model="form.nickName"/> -->
					<view class="choseTime-box">
						<view class="time">
							{{form.choseTime}}
						</view>
						

						<image style="width: 70rpx; height: 70rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/xiala.png"></image>
					</view>
					<view class="title">
						小时
					</view>
					
				</view>
			</view>
			<view class="chuchai-box">
				<view class="title">
					上传出差申请截图
				</view>
				
			</view>
			<view class="upload-content">
				<view class="upload-image-box flex-block-row">
					<view class="image-box" v-for="(child,idx) in imgList" :key="idx" @tap="viewImage" :data-index="index" :data-idx="idx">
						<image style="width: 120rpx; height: 120rpx;" :src="baseUrl+'/api/sys/file/download?attachId='+imgList[idx]+'&width=300'" mode="aspectFill"></image>
						<view class="close-icon-box" @tap.stop="delImg" :data-index="index" :data-idx="idx">

							<image style="width: 34rpx; height: 34rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/icon/dele.png"></image>
						</view>
					</view>
					<view class="upload-btn-box" v-if="imgList.length<1">
						<button plain="true" class="upload-btn" @tap="chooseImage(index)"><image style="width: 120rpx; height: 120rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/update.png"></image></button>

					</view>
				</view>
			</view>
		</view>
		
		<!-- 选择部门 -->
		<view class="dialog-center-bg" v-if="showDialogDept" @click="showDialogDept=false"></view>
		<view class="dialog-center-content" v-if="showDialogDept">
			<view class="dialog-center-title">选择部门</view>
			<view class="form-box">
				<radio-group name="ordertype" class="send-radio flex-block-row radio-big" @change="changeDept">
					<label class="flex-1"  >
						<view v-for="(item,index) in deptList" :key="index" style="padding: 10rpx 20rpx;">
							<radio :value="item.name" style="transform:scale(1.5);margin-top: -10rpx;" />
							<text style="font-weight: bold;font-size: 32rpx;">{{item.name}}</text>
							
						</view>
					</label>
					
				</radio-group>
			</view>
			<view class="btn-box">
				<button class="dlg-btn close-btn" type="primary" @click="showDialogDept=false">取消</button>
				<button class="dlg-btn submit-btn" type="primary" style="background-color:#129de8 ;" @click="confirmDept">提交</button>
			</view>
			
		</view>
		<!-- 选择车牌号-->
		<view class="dialog-center-bg" v-if="showDialogCarNum" @click="showDialogCarNum=false"></view>
		<view class="dialog-center-content" v-if="showDialogCarNum">
			<view class="dialog-center-title">选择车牌号</view>
			<view class="form-box">
				<radio-group name="ordertype" class="send-radio flex-block-row radio-big" @change="changeCarNum">
					<label class="flex-1"  >
						<view v-for="(item,index) in carNumList" :key="index" style="padding: 10rpx 20rpx;display: flex;flex-direction: row;align-items: center;">
							<radio :value="item.carNum"  style="transform:scale(1.5);margin-top: -10rpx;" />
							<text style="font-weight: bold;font-size: 32rpx;">{{item.carNum}}</text>
						</view>
						<view v-if="carNumList.length==0" class="no-data-box">
							<image mode="aspectFit" src="https://parking.htfa.cn/parking/images/wushuju.png"></image>
							<view>当前用户暂无车牌号~</view>
						</view>
					</label>
				</radio-group>
			</view>
			<view class="btn-box">
				<button class="dlg-btn close-btn" type="primary" @click="showDialogCarNum=false">关闭</button>
				<button v-if="carNumList.length >0" class="dlg-btn submit-btn" type="primary" style="background-color:#129de8 ;" @click="confirmCarNum">提交</button>
			</view>
		</view>
		<!-- 选择时间-->
		<view class="dialog-center-bg" v-if="showDialogTime" @click="showDialogTime=false"></view>
		<view class="dialog-center-content" v-if="showDialogTime">
			<view class="dialog-center-title">选择时长</view>
			<view class="form-box">
				<radio-group name="ordertype" class="send-radio flex-block-row radio-big" @change="changeTime">
					<label class="flex-1"  >
						<view v-for="(item,index) in timeList" :key="index" style="padding: 10rpx 20rpx;display: flex;flex-direction: row;align-items: center;">

							<radio :value="item"  style="transform:scale(1.5);margin-top: -10rpx;" />
							<text style="font-weight: bold;font-size: 32rpx;">{{item}}</text>

						</view>
					</label>
				</radio-group>
			</view>
			<view class="btn-box">
				<button class="dlg-btn close-btn" type="primary" @click="showDialogTime=false">取消</button>
				<button class="dlg-btn submit-btn" type="primary" style="background-color:#129de8 ;" @click="confirmTime">提交</button>
			</view>
		</view>
		<!-- 是否进行登录的弹窗 -->
		<view class="dialog-center-bg" v-if="!hasLogin" @click="hasLogin=true"></view>
		<view class="dialog-center-content" v-if="!hasLogin">
			<view class="dialog-center-title">你还没登录,请先登录</view>
			
			<view class="btn-box">
				<button class="dlg-btn close-btn" type="primary" @click="hasLogin=true">取消</button>
				<button class="dlg-btn submit-btn" type="primary" style="background-color:#129de8 ;" @click="goToLogin">去登录</button>
			</view>
		</view>
		<view  class="login-btn-box">
			<view  class="login-btn" @click="parkingExtension">提交</view>
		</view>
	</view>
</template>

<script>
	import carNumberInput from '@/components/car-number-input/car-number-input'
	export default {
		components: {
			carNumberInput
		},
		data() {
			return {
				baseUrl:this.$client.IMG_URL,
				userInfo:{},
				company_name:'',
				form:{
					name:'',
					mobilePhone:'',
					choseDept:'',
					choseTime:0,
					carNum:'',
					imgIds:''
				},
				defaultNum: '粤G',
				
				showDialogTime:false,
				showDialogDept:false,
				showDialogCarNum:false,
				carNumList:[],
				deptList:[],
				timeList:[],
				other_menu:[
					
					{
						image_url:'../../static/my_other5.png',
						name:'我的订单',
						url:'/pages/orderlist/orderlist',
						id:5
					},
					{
						image_url:'../../static/my_other4.png',
						name:'个人信息',
						url:'/pages/personal/personal',
						id:4
					},
					
				],
				imgList:[],

				hasLogin:false

			}
		},
		onLoad() {
			var _this = this;
			uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#70dbff'
			})
		},
		onShow() {
			var _this = this;
			if(uni.getStorageSync("userInfo")){
				console.log(uni.getStorageSync("userInfo"),"用户信息")
				this.userInfo = uni.getStorageSync("userInfo");
				this.form.nickName = this.userInfo.userName;
			}
			if(uni.getStorageSync("token")&&uni.getStorageSync("userInfo")) {
				_this.hasLogin = true;
				//用户当前信息
				_this.getInitData();
				//测试
				// _this.getInitDataCarText()
				_this.getListExtensionHour()
				//_this.getInitDataDept()
				
			}else{
				_this.hasLogin = false;
			}
			
		},
		methods: {
			//去登录
			goToLogin(){
				if(!(uni.getStorageSync("token"))) {
					uni.navigateTo({
					    url: "/pages/hrlogin/hrlogin"
					});
					return;
				}
			},
			//车牌号
			numberInputResult(e) {
			            console.log('结果--' + e)
						this.form.inputCarNumber=e
						 console.log('车牌号结果如下--' + this.form.inputCarNumber)
			        },
			//确定桌台
			confirmDept(){
				
				// this.tableCode=this.tableCode
				this.showDialogDept=false
			},
			//选择桌台
			changeDept(e){
				console.log(e.target.value,"选择桌台")
				this.form.choseDept=e.target.value
			},
			//确定桌台
			confirmTime(){
				
				// this.tableCode=this.tableCode
				this.showDialogTime=false
			},
			//选择桌台
			changeTime(e){
				console.log(e.target.value,"选择时间")
				this.form.choseTime=e.target.value
			},
			// 确认车牌号
			confirmCarNum(){
				this.showDialogCarNum=false
			},
			//选择车牌号
			changeCarNum(e){
				console.log(e.target,e.target.value,"选择车辆")
				this.form.carNum=e.target.value
				this.form.choseDept=this.userInfo.listAllOrg[0].orgName
				this.form.mobilePhone=this.userInfo.mobilePhone
				this.form.name=this.userInfo.userName
				this.$nextTick(()=>{
					this.getInitDataCarNum()
				})
			},
			
			getListExtensionHour(){
				var _this = this;
				this.$client.get('/api/biz/parking/extension/getListExtensionHour', {}, function(res,message){
					console.log(res,"获取时间")
					
					_this.timeList=res
				},function(res){
					
				},true);
			},
			getInitData(){
				var _this = this;
				this.$client.get('/api/biz/parking/extension/getListCarForCurrentUser', {}, function(res,message){
					console.log(res,"获取当前用户的车辆信息集合")
					// uni.setStorageSync('userInfo', res);
					_this.carNumList=res
				},function(res){
					
				},true);
			},
			getInitDataCarNum(){
				var _this = this;
				var parmas={
					carNum:_this.form.carNum
				}
				this.$client.get('/api/biz/parking/extension/getApplyNumForCurrentUser', parmas, function(res,message){
					console.log(res,"选择车牌号之后的延期几次")
					_this.timeList.forEach((item,index)=>{
						if(Math.abs(res)==index && Math.abs(res) !=2){
							console.log(index,res,"res",item)
							_this.form.choseTime=item
						}
						if(Math.abs(res)==2){
							_this.$util.showToast({title:_this.form.carNum+'已申请'+Math.abs(res)+'次了'});
						}
					})
					// uni.setStorageSync('userInfo', res);
					_this.userInfo=res
				},function(res){
					_this.$util.showToast({title:res});
					// console.log(res,"选择车牌号之后的延期几次")
				},true);
			},
			//测试
			// getInitDataCarText(){
			// 	var _this = this;
			// 	var parmas={
			// 		mobilePhone:'18575901102'
			// 	}
			// 	this.$client.get('/api/biz/parking/extension/getListCarForAdmin', parmas, function(res,message){
			// 		console.log(res,"车牌号")
			// 		// uni.setStorageSync('userInfo', res);
			// 		_this.userInfo=res
			// 	},function(res){
			// 		_this.$util.showToast({title:res});
			// 		// console.log(res,"选择车牌号之后的延期几次")
			// 	},true);
			// },
			//获取部门
			getInitDataDept(){
				var _this = this;
				var parmas={
				}
				this.$client.get('/api/sys/org/getListForUser', parmas, function(res,message){
					console.log(res,"部门集合")
					
					_this.deptList=res
				},function(res){
					_this.$util.showToast({title:res});
					
				},true);
			},
			changeName(){
				this.showDialog = true;
			},
			onInputName(e){
				this.form.nickName = e.target.value
			},
			confirmName(){
				var _this = this;
				if(this.form.nickName==''){
					this.$util.showToast({title:'请填写新的昵称！'});
					return;
				}
				var params = {
					
				}
				uni.showLoading({
				    title: '加载中...'
				});
				this.$client.post('/api/sys/user/update', params, function(res,message){
					uni.hideLoading();
					_this.$util.showToast({title:message});
					_this.showDialog = false;
					_this.userInfo.userName = _this.form.nickName;
					uni.setStorageSync("userInfo",_this.userInfo);
					console.log(uni.getStorageSync("userInfo"),"信息")
				},function(res){
					uni.hideLoading();
					if(res){
						_this.$util.showToast({title:res});
					}
				},true);
			},
			
			//选择图片
			chooseImage(index) {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						if(res.tempFiles[0].size > 10 * 1024 * 1000){  //上传图片大小限制
							_this.$util.showToast({title:"照片大小不能10MB"});
							return
						}
						/* if (_this.goodsList[index].imgList.length != 0) {
							_this.goodsList[index].imgList = _this.goodsList[index].imgList.concat(res.tempFilePaths)
						} else {
							_this.goodsList[index].imgList = res.tempFilePaths
						} */
						//console.log(res.tempFilePaths[0]);
						var token =uni.getStorageSync("token") || '';
						var key = uni.getStorageSync("key") || '';
						var secret = uni.getStorageSync("secret") || '';
						var timestamp = Math.round(new Date().getTime()/1000).toString();
						var sign = _this.$util.getSign({},timestamp,key,secret);
						uni.uploadFile({
							url: _this.$client.API_URL+'/api/sys/file/upload', 
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {}, 
							header:{token:token,key:key,sign:sign,timestamp:timestamp},
							success: (res) => {
								//console.log(res.data,"上传图片");
								var data = JSON.parse(res.data)
								console.log(data,"上传图片");
								_this.imgList.push(data.data.icode);
								_this.form.imgIds=data.data.icode
								console.log(_this.imgList)
								// var view_list = [];
								
								// _this.imgList.forEach(item => {
								// 	view_list.push(_this.baseUrl + '/api/sys/file/download?attachId='+item+'&width=200');
								// 	console.log(view_list,"view_list")
								// })
								// _this.imgList=view_list
								_this.$forceUpdate();
							}
						});
					}
				});
			},

			//选择图片
			chooseImage(index) {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						if(res.tempFiles[0].size > 10 * 1024 * 1000){  //上传图片大小限制
							_this.$util.showToast({title:"照片大小不能10MB"});
							return
						}
						/* if (_this.goodsList[index].imgList.length != 0) {
							_this.goodsList[index].imgList = _this.goodsList[index].imgList.concat(res.tempFilePaths)
						} else {
							_this.goodsList[index].imgList = res.tempFilePaths
						} */
						//console.log(res.tempFilePaths[0]);
						var token =uni.getStorageSync("token") || '';
						var key = uni.getStorageSync("key") || '';
						var secret = uni.getStorageSync("secret") || '';
						var timestamp = Math.round(new Date().getTime()/1000).toString();
						var sign = _this.$util.getSign({},timestamp,key,secret);
						uni.uploadFile({
							url: _this.$client.API_URL+'/api/sys/file/upload', 
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {}, 
							header:{token:token,key:key,sign:sign,timestamp:timestamp},
							success: (res) => {
								//console.log(res.data,"上传图片");
								var data = JSON.parse(res.data)
								console.log(data,"上传图片");
								_this.imgList.push(data.data.icode);
								console.log(_this.imgList)
								// var view_list = [];
								
								// _this.imgList.forEach(item => {
								// 	view_list.push(_this.baseUrl + '/api/sys/file/download?attachId='+item+'&width=200');
								// 	console.log(view_list,"view_list")
								// })
								// _this.imgList=view_list
								_this.$forceUpdate();
							}
						});
					}
				});
			},

			//预览图片
			viewImage(e) {
				var index = e.currentTarget.dataset.index;
				var img_list = this.imgList;
				var view_list = [];
				console.log(img_list,"截图")
				img_list.forEach(item => {
					view_list.push(this.baseUrl + '/api/sys/file/download?attachId='+item+'&width=200');
					console.log(view_list,"view_list")
				})
				
				uni.previewImage({
					urls: view_list,
					current: e.currentTarget.dataset.idx
				});
			},
			//删除图片
			delImg(e) {

				var _this = this;
				var index = e.currentTarget.dataset.index;
				var idx = e.currentTarget.dataset.idx;
				uni.showModal({
					title: '提示',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					cancelColor:'#666666',
					confirmColor:'#129de8',
					success: function (res) {
						if (res.confirm) {
							_this.imgList.splice(idx, 1);
							_this.$forceUpdate();
						}
					}
				})
			},
			//退出登录
			parkingExtension(){

				var _this = this;
				var index = e.currentTarget.dataset.index;
				var idx = e.currentTarget.dataset.idx;
				uni.showModal({
					title: '提示',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					cancelColor:'#666666',
					confirmColor:'#129de8',
					success: function (res) {
						if (res.confirm) {
							_this.imgList.splice(idx, 1);
							_this.$forceUpdate();
						}
					}
				})
			},
			//提交申请延长停车
			parkingExtension(){
				var _this = this;
			
				uni.showLoading({
				    title: '加载中...'
				});
				var parmas={
					carNum:_this.form.carNum,
					userPhoneNumber:_this.form.mobilePhone,
					userName:_this.form.name,
					userOrgName:_this.form.choseDept,
					imgIds:_this.form.imgIds,
					exHour:_this.form.choseTime
				}
				if (!this.form.carNum) {
					uni.showToast({
						title: '请选择车牌号',
						icon: 'none'
					});
					return;
				}
				if (!this.form.imgIds) {
					uni.showToast({
						title: '请上传出差截图',
						icon: 'none'
					});
					return;
				}
				this.$client.post('/api/biz/parking/extension/apply', parmas, function(res,message){
					uni.hideLoading();
					_this.$util.showToast({title:message});

					setTimeout(()=>{
						uni.switchTab({
							url: "/pages/index/index"
						});
					},500)

				},function(res){
					_this.$util.showToast({title:res});
				},true);
			}
		}
	}
</script>

<style lang="scss">
	.page-content-box{
		height: 100%;
		box-sizing: border-box;
		background-color: #d6f0ef;
	}
	.my-top-box{
		width:100%;
		height:350rpx;
		/* background:linear-gradient(180deg,rgba(253, 166, 0, 1.0),rgba(253, 145, 13, 1.0)); */
		border-radius:0 0 0 80rpx;
		position: relative;
		/* background:url('../../static/parking_bg.png') 0 0 no-repeat; */
	}
	.my-top-box::before{
		content: "";
		height:350rpx;
		width: 750rpx;
		display: block;
		background:url('https://parking.htfa.cn/parking/images/parking_bg1.png') 0 0 no-repeat;
		-webkit-background-size: contain;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.my-top-content{
		text-align: center;
		padding-top: 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}
	.my-top-content .img-box{
		border-radius: 50%;
		overflow: hidden;
	}
	.my-top-content .img-box image{
		border-radius: 50%;
	}
	.my-top-content .name-box{
		font-size:60rpx;
		margin-left: 280rpx;
		/* font-weight:bold; */
		color:rgba(255,255,255,1);
		line-height: 68rpx;
		letter-spacing: 2px;
	}
	.my-top-content .company-box{
		font-size:24rpx;
		color:rgba(255,255,255,1);
		line-height: 40rpx;
	}
	.scan-box{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: auto;
		right: 40rpx;
		top: 40rpx;
		z-index: 10;
	}
	// 车牌号区域
	.content-box{
		padding:20rpx 40rpx;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.car-number{
			width: 670rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 40rpx;
				font-weight: bold;
				color: #7f8283;
				letter-spacing: 3px;
				word-break: keep-all;
				margin-right: 20rpx;
			}
			.car-number-box{
				padding: 20rpx 10rpx;
				margin-top: 20rpx;
				width: 670rpx;
				border-radius: 10rpx;
				background-color:#00d0ff;
			}
			.car-chose{
				width: 510rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				background-color: #fff;
				height: 78rpx;
				border-radius: 10rpx;
				.choseCarNum{
					margin-left: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #7f8283;
					letter-spacing: 3px;
					//margin-right: 20rpx;
					
				}
				
			}
		}
		.name-box{
			
			width: 670rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 40rpx;
				font-weight: bold;
				color: #7f8283;
				letter-spacing: 3px;
				margin-right: 20rpx;
				word-break: keep-all;
			}
			.name-input{
				width: 510rpx;
				border-radius: 10rpx;
				// width: 100%;
				.input-content{
					// width: 510rpx;
					border-radius: 10rpx;
				}
				.choseDept{
					// width: 510rpx;
					// margin-left: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #7f8283;
					letter-spacing: 3px;
					
				}
			}
		}
		.dept-box{
			width: 670rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 40rpx;
				font-weight: bold;
				color: #7f8283;
				letter-spacing: 3px;
				word-break: keep-all;
				margin-right: 20rpx;
			}
			.dept-chose{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 510rpx;
				background-color: #fff;
				height: 78rpx;
				border-radius: 10rpx;
				.choseDept{
					margin-left: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #7f8283;
					letter-spacing: 3px;
				//	margin-right: 20rpx;
					// width: 540rpx;
				}
				
			}
		}
		.phone-box{
			width: 670rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 40rpx;
				font-weight: bold;
				color: #7f8283;
				letter-spacing: 3px;
				word-break: keep-all;
				margin-right: 20rpx;
			}
			.name-input{
				border-radius: 10rpx;
				// width: 100%;
				.input-content{
					//width: 410rpx;
					border-radius: 10rpx;
				}
				.choseDept{
					margin-left: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #7f8283;
					letter-spacing: 3px;
				//	margin-right: 20rpx;
				}
			}
		}
		.time-box{
			width: 670rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			.title{
				font-size: 40rpx;
				font-weight: bold;
				color: #7f8283;
				letter-spacing: 3px;
				margin-right: 20rpx;
				word-break: keep-all;
			}
			.time-chose{
				width: 510rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				
				border-radius: 20rpx;
				.choseTime-box{
					margin-left: 20rpx;
					margin-right: 20rpx;
					width: 300rpx;
					background-color: #fff;
					height: 78rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-radius: 10rpx;
					.time{
						font-size: 40rpx;
						font-weight: bold;
						color: #7f8283;
						letter-spacing: 3px;
						margin-left: 20rpx;
					}
					// width: 540rpx;
				}
				
			}
		}
		.chuchai-box{
			margin-top: 20rpx;
			.title{
				font-size: 40rpx;
				font-weight: bold;
				color: #7f8283;
				letter-spacing: 3px;
				margin-right: 20rpx;
			}
		}
	}
	.my-center-box{
		justify-content: space-around;
	}
	.my-center-box .my-center-item{
		flex: 1;
		padding: 36rpx 0;
	}
	.my-center-box .my-center-item .img-box{
		text-align: center;
		height: 80rpx;
	}
	.my-center-box .my-center-item .name{
		line-height: 40rpx;
		font-size:24rpx;
		color:rgba(22,22,22,1);
		text-align: center;
	}
	.other-menu-box{
		width:calc(100% - 40rpx);
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		margin: 0 20rpx;
		margin-top: 40rpx;
	}
	.other-menu-box .other-menu-item{
		height: 100rpx;
		border-bottom:rgba(238,238,238,1);
	}
	.other-menu-box .other-menu-item .other-menu{
		width: 100%;
		height: 100rpx;
	}
	.other-menu-box .other-menu-item .other-button{
		padding: 0;
		text-align: left;
		line-height: 100rpx;
		border: none;
	}
	.other-menu-item .img-box{
		width: 70rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.other-menu-item .img-box image{
		vertical-align: middle;
	}
	.other-menu-item .name{
		width: 588rpx;
	}
	.other-menu-item .go-right{
		width: 52rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.login-btn-box{
		padding: 10rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.login-btn-box .login-btn{
	
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background:#70dbff;
		border-radius:60rpx;
		font-weight: bold;
		font-size:36rpx;
		padding: 10rpx;
		width: 650rpx;
		
		// letter-spacing: 2px;
		color:rgba(255,255,255,1);
		
	}
</style>
